/*
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-05-25 11:50:07
 * @LastEditTime: 2022-05-27 10:50:16
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 
 */

const that = window

import './video.less'

interface setting {
  url: string,
  el: HTMLElement,
  width?: string,
  height?: string,
  autoplay?: boolean

}

/* 组件方法接口 */
interface componentMethod {
  templateContainer: HTMLElement
  init: () => void,
  template: () => void,
  handle: () => void
}

export default function video(setting: setting) {
  return new Video(setting)
}

class Video implements componentMethod {
  templateContainer: HTMLElement
  constructor(private setting: setting,) {
    this.templateContainer = document.createElement('div')
    this.setting = Object.assign({
      width: '100%',
      height: '100%',
      autoplay: false
    }, this.setting)
    this.init()
    this.handle()
  }
  init() {
    this.template()
  }
  template() {
    this.templateContainer.className = 'video-container'
    this.templateContainer.innerHTML = `
    <div class='video-box'>
      <video id='videoRef' src=${this.setting.url}></video>
    </div>
    <div class='video-controller'>
      <div class='progress'>
        <div class='progress-now'></div>
        <div class='progress-suc'></div>
        <div class='progress-pie'></div>
      </div>
      <div class='controller'>
        <div class='controller-l'>
          <div id='play'>
            <i class='iconfont icon-bofang'></i>
          </div>
          <div class='controller-time'>
            <span class='current-time'>00:00</span> / <span class='all-time'>114:46</span>
          </div>
        </div>
        <div class='controller-r'>
          <div class='controller-video'>
            <i class='iconfont icon-shengyinkai'></i>
            <div class='videoProgress'>
              <div class='videoProgress-now'></div>
              <div class='videoProgress-pie'></div>
            </div>
          </div>
          <div class='controller-full'>
            <i class='iconfont icon-quanping'></i>
          </div>
        </div>
        </div>
      </div>
    `
    this.setting.el.appendChild(this.templateContainer)
  }
  handle() {
    const videoContent = this.templateContainer.querySelector('#videoRef') as HTMLVideoElement
    const playIcon = this.templateContainer.querySelector('.controller-l .icon-bofang') as HTMLElement
    const play = this.templateContainer.querySelector('#play')
    /* 全屏标签 */
    const videoFull = this.templateContainer.querySelector('.controller-r .icon-quanping')
    /* 时长标签 */
    const videoTime = this.templateContainer.querySelectorAll('.controller-time span')
    /* 进度标签 */
    const videoProgress = this.templateContainer.querySelectorAll('.progress div') as NodeListOf<HTMLElement>;

    let timer: NodeJS.Timeout

    /* 监听播放 */
    videoContent.addEventListener('canplay', () => {
      console.log('监听音频');
      /* 总时长 */
      videoTime[1].innerHTML = formatTime(videoContent.duration)

    })
    /* 监听播放 */
    videoContent.addEventListener('play', () => {
      playIcon.className = 'iconfont icon-Pause'
      timer = setInterval(playing, 500)
    })

    /* 监听暂停 */
    videoContent.addEventListener('pause', () => {
      playIcon.className = 'iconfont icon-bofang'
      clearInterval(timer)
    })

    /* 监听点击播放/暂停按钮 */
    play?.addEventListener('click', () => {
      if (videoContent.paused) {
        videoContent.play()
      } else {
        videoContent.pause()

      }
    })

    /* 监听点击小球 */
    videoProgress[2].addEventListener('mousedown', function (e: MouseEvent) {
      e.preventDefault()
      const beforeX = e.pageX
      const beforeWidth = videoProgress[0].getBoundingClientRect().width

      /* 监听事件 */
      const event = (e: MouseEvent) => {
        
        const parentNode = this.parentNode as HTMLElement

        let moveLength = (e.pageX - beforeX + beforeWidth + 5)
        let moveScale = moveLength / parentNode?.offsetWidth

        if (moveScale <= 0) { moveScale = 0; moveLength = 0 }
        else if (moveScale >= 1) { moveScale = 1; moveLength = parentNode?.offsetWidth }

        videoContent.currentTime = videoContent.duration * moveScale
        videoTime[0].innerHTML = formatTime(videoContent.currentTime)

        videoProgress[0].style.transform = `scaleX(${moveScale})`
        videoProgress[2].style.transform = `translate3d(${moveLength}px, -50%, 0)`

      }

      document.addEventListener('mousemove', event)
      document.addEventListener('mouseup', () => {
        document.removeEventListener('mousemove', event)
      })

    })

    /* 监听点击全屏 */
    videoFull?.addEventListener('click', () => {
      videoContent.requestFullscreen()
    })

    function playing() {
      /* 当前时长 */
      videoTime[0].innerHTML = formatTime(videoContent.currentTime)

      /* 当前进度比例 */
      const scale = videoContent.currentTime / videoContent.duration
      /* 当前进度 */
      videoProgress[0].style.transform = `scaleX(${scale})`
      // videoProgress[0].style.width = scale * 100 + '%'

      /* 当前缓冲比例 */
      const bufferScale = videoContent.buffered.end(0) / videoContent.duration
      /* 当前缓冲进度 */
      videoProgress[1].style.width = bufferScale * 100 + '%'

      /* 小球位置 */
      videoProgress[2].style.transform = `translate3d(${videoProgress[0].getBoundingClientRect().width}px, -50%, 0)`


    }

    /* 时间格式化 */
    function formatTime(time: number) {
      let minute: number | string = Math.floor(time / 60)
      let second: number | string = Math.floor(time % 60)
      minute = minute < 10 ? '0' + minute : minute
      second = second < 10 ? '0' + second : second
      return minute + ':' + second
    }

  }
}
